<template>
    <div class="box">
      <div class="header">
        <van-nav-bar
          :title="cartTitle"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <div class="content">
        <div class="li" v-if="cartList">
          <!-- 复选框 cart列表 -->
          <van-row  v-for="item of cartList" :key="item.proid">
            <van-swipe-cell class="cell">
              <van-col span="2">
                <van-checkbox v-model="item.flag" @change="changeFlag(item.cartid, item.flag)" class="mar" />
              </van-col>
              <van-col span="22">
                <!-- :num="item.num" -->
                  <van-card
                    :price="item.originprice"
                    desc="描述信息"
                    :title="item.proname"
                    :thumb="item.img1"
                  />
                  <van-stepper v-model="item.num" id="ste" theme="round" button-size="22" disable-input />
              </van-col>
                <template #right>
                  <van-button square text="删除" type="danger" @click="deleteList(item.cartid)" class="delete-button" />
                </template>
            </van-swipe-cell>
          </van-row>
        </div>
        <van-empty
          v-if="!cartList"
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车是空的，快去购物吧"
        />
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="allChecked" @click="changeAll">全选</van-checkbox>
        </van-submit-bar>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Card, Col, Row, Checkbox, CheckboxGroup, SubmitBar, SwipeCell, Button, Empty, Stepper } from 'vant'
import { getCartList, delCartList, selectone, selectall, addOrder } from '@/api/cart'

Vue.use(NavBar)
Vue.use(Card)
Vue.use(Col)
Vue.use(Row)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(SubmitBar)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Empty)
Vue.use(Stepper)
export default {
  data () {
    return {
      checked: true,
      cartList: [],
      allChecked: false,
      token: localStorage.getItem('token'),
      userid: localStorage.getItem('userid')
    }
  },
  computed: {
    cartTitle () {
      if (this.cartList) return '购物车(' + (this.cartList.length ? this.cartList.length : 0) + ')'
      return '购物车'
    },
    totalPrice () { // 总价
      if (!this.cartList) return 0
      return 100 * this.cartList.reduce((sum, item) => {
        return sum + item.num * item.originprice * (item.flag ? 1 : 0)
      }, 0)
    }
  },
  async mounted () {
    var params = { token: localStorage.getItem('token'), userid: localStorage.getItem('userid') }
    this.cartList = await getCartList(params)
    this.isAll()
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async onSubmit () {
      var res = await addOrder({ userid: this.userid })
      if (res.code === '200') this.$router.push({ name: 'order', params: { time: res.time } })
    },
    deleteList (cid) {
      var params = { cartid: cid }
      delCartList(params).then(async () => {
        // 重新拉取数据
        var params = { token: this.token, userid: this.userid }
        this.cartList = await getCartList(params)
      })
    },
    isAll () {
      if (this.cartList) {
        this.allChecked = this.cartList.every(item => {
          return item.flag
        })
      }
      return 1
    },
    async changeAll () {
      var params = { userid: localStorage.getItem('userid'), type: this.allChecked }
      selectall(params)
      this.cartList = await getCartList({ token: this.token, userid: this.userid })
      this.isAll()
    },
    changeFlag (cid, flag) {
      var params = { cartid: cid, flag: flag }
      selectone(params)
      this.isAll()
    }
  }
}
</script>

<style lang='stylus' scoped>
.cell
  position relative
  #ste
    position absolute
    right 1.5rem
    top 3.5rem
.content
  background-color #fafafa
.mar
  margin-left 10px
  margin-top 40px
  z-index 10
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 104px
}

</style>
